.container{
    width: 100%;
    height: 100%;
    overflow: auto;
    // padding: 20px;
    
    :global {
        .arch-card {
            margin-bottom: 24px;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
            
            &:hover {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }
        }
        
        .arch-card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 16px 24px;
            font-size: 18px;
            font-weight: 600;
        }
        
        .arch-card-body {
            padding: 24px;
        }
        
        .section-title {
            font-size: 20px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e8e8e8;
        }
        
        .subsection-title {
            font-size: 16px;
            font-weight: 500;
            color: #595959;
            margin: 16px 0 12px;
        }
        
        .tech-item {
            background: #f5f5f5;
            padding: 12px 16px;
            border-radius: 6px;
            margin-bottom: 8px;
            border-left: 4px solid #1890ff;
        }
        
        .timeline-item {
            margin-bottom: 12px;
        }
        
        .feature-tag {
            margin-right: 8px;
            margin-bottom: 8px;
        }
        
        .info-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .info-item {
            padding: 8px 0;
            border-bottom: 1px dashed #f0f0f0;
            
            &:last-child {
                border-bottom: none;
            }
        }
    }
}